<div class="row main-banner whiteColor">
    <div class="col-md-8">
        <div class="main-banner-images" id="my-slideshow">
            <img src="images/sample-slide-1.jpg" />
            <img src="images/sample-slide-2.jpg" />
            <img src="images/sample-slide-3.jpg" />
        </div>
    </div>

    <div class="col-md-4">
        <div class="main-banner-content-wrapper blueBg">
            <div class="blockHeight15"></div>
            <div class="main-banner-content" id="my-slideshow-caption"></div>
        </div>
    </div>

    <div class="main-banner-middle-line blueBg"></div>
    <div class="main-banner-footer-line"></div>
    <div class="main-banner-arrow"></div>

    <div class="main-banner-control text-center">
        <div id="my-slideshow-pager"></div>
    </div>
</div>
<div class="blockHeight30"></div>

<!-- CAPTIONS -->
<ul id="my-slideshow-content" class="hide">
    <li>
        <h3>
            HỘI TRẠI
            <br/>GIA ĐÌNH HỒN NHIÊN
        </h3>
        <p>
            Địa điểm: Vườn quốc gia
            <b>NAM CÁT TIÊN</b>
            <br/>Thời gian: 17-18/09/2013
            <br/>Liên hệ:
            <b>Trương Khánh Trân</b>
            <br/>Số điện thoại: 090 200 1234
            <br/>Email:
            <i>tran.truong@gmail.com</i>
        </p>
        <p>
            <b>
                <i>
                    Ngủ lều, đốt lửa trại, đào lò, nấu cơm
                    <br/>bếp củi, nướng khoai, xem thú ăn đêm...
                </i>
            </b>
        </p>
        <p class="text-right">
            <a href="javascript:void(0)" title="Click vào để xem chi tiết" class="link linkHoverUnderline whiteColor whiteHover">Xem chi tiết</a>
        </p>
    </li>
    <li id="my-slideshow-content-2">slide 1</li>
    <li id="my-slideshow-content-3">slide 2</li>
</ul>
<!-- .CAPTIONS -->

<script type="text/javascript">
var shownCaption = false;

$( '#my-slideshow' ).cycle({
    log: false,
    pauseOnHover: true,
    timeout: 3000,
    fx: 'fade',
    prev: '#slidePrev',
    next: '#slideNext',
    pager: '#my-slideshow-pager'
});

$( '#my-slideshow-caption' ).html( $('#my-slideshow-content li:nth-child(1)').html() );

$( '#my-slideshow' ).on( 'cycle-after', function( event, opts ) {
    //--------------- CAPTIONS ---------------
    var index;
    if ( ! shownCaption ) {
        if ( opts.slideCount == opts.currSlide + 1 ) {
            index = 1;
        } else {
            index = opts.currSlide + 2;
        }
        setCaption( index );
    }
    shownCaption = false;
    //--------------- .CAPTIONS ---------------
});
$( '#my-slideshow' ).on( 'cycle-pager-activated', function( event, opts ) {
    var index;
    index = opts.currSlide + 1;
    setCaption( index );
    shownCaption = true;
});

function setCaption( index ) {
    var content;

    content = $('#my-slideshow-content li:nth-child('+ index + ')').html();
    $( '#my-slideshow-caption' ).html( content );
}
</script>